<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学生信息页面</title>
<link rel="stylesheet" href="../layui/css/layui.css" media="all">

<style>
.layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {
	height: 34px;
	line-height: 34px;
	padding: 0 8px;
}
</style>
</head>
<body>
	<div class="layuimini-container">
		<div class="layuimini-main">
			<div class="layui-form" style="margin-top: 20px;" onsubmit="false">
				<div class="layui-form-item">
					<label class="layui-form-label">学生姓名:</label>
					<div class="layui-input-inline">
						<input type="text" name="s_name" id="s_name" placeholder="请输入学生姓名"
							class="layui-input">
					</div>
					<label class="layui-form-label">阅览卡卡号:</label>
					<div class="layui-input-inline">
						<input type="text" name="s_card" id="s_card" placeholder="请输入阅览卡卡号"
							class="layui-input">
					</div>
					<button class="layui-btn" id="search" data-type="reload">搜索</button>
				</div>
			</div>
			<div>
				<table class="layui-hide" id="test" lay-filter="test"></table>
			</div>
		</div>
	</div>
	
	<script type="text/html" id="Tpl">
      {{#  if(d.s_status == 1){ }}
          <span style="color: green;">正在阅读</span>
      {{#  } else if(d.s_status == 2){ }}
          <span style="color: orange;">未在阅读</span>
    {{#  }  }}
  </script>
  
	<!-- 操作列 -->
	<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs" lay-event="editstudents">编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delstudents">删除</a>
		</script>
    <script type="text/html" id="toolbarDemo">
      <!--表头上面引入了一个添加用户的操作-->
      <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addstudents">添加</button>
      </div>
    </script>
	<script src="../layui/layui.js" charset="utf-8"></script>
	<script>
		layui.use([ 'form', 'table' ],  function() { //如果只加载一个模块，可以不填数组。如：layui.use('form')
			var table = layui.table; //获取table模块
			var form = layui.form;
			var $ = layui.jquery;
			// 渲染表格
			table.render({
				elem : '#test',
				url : '../getAllStudents',
				toolbar : '#toolbarDemo', //开启头部工具栏
				where : {
					method : 'getAll',
					s_name : '',
					s_card:''
				},
				method : 'POST',
				cols : [ [ {
					field : 's_id',
					title : '学生ID',
					fixed : 'left',
					align:'center',
					sort : true,
					width : 90,
				}, {
					field : 's_name',
					title : '学生姓名',
					align:'center',
					width : 90,
				}, {
					field : 's_card',
					title : '学生卡号',
					align:'center',
					sort : true,
					width : 135,
				}, {
					field : 's_gender',
					title : '学生性别',
					align:'center',
					width : 110,
				}, {
					field : 's_age',
					title : '学生年龄',
					align:'center',
					sort : true,
					width : 110,
				}, {
					field : 's_phone',
					title : '电话号码',
					align:'center',
					width : 140,
				}, {
					field : 's_email',
					title : '电子邮箱',
					align:'center',
					width : 140,
				}, {
					field : 's_card_password',
					title : '阅览卡密码',
					align:'center',
					width : 120,
				}, {
					field : 's_status',
					title : '状态',
					templet : '#Tpl',
					align:'center',
					width : 90,
				}, {
					title : '操作',
					fixed : 'right',
					align : 'center',
					toolbar : '#barDemo',
					width : 150
				} ] ],
				id : 'testReload',
				page : true
			});
			$('#search').on('click', function() {
				var s_name = $("#s_name").val();
				var s_card = $("#s_card").val();
				table.reload('testReload', {
					where : {
						's_name' : s_name,
						's_card':s_card
					}
				});
			});
			//监听提交按钮
			table.on('tool(test)', function(obj) {
				var data = obj.data;
				if (obj.event === 'delstudents') {
					layer.confirm('真的删除该学生的基本信息吗?', function(index) {
						console.log(obj.data);
						var url = '../deleteStudents';
						$.post(url, {
							"s_id" : obj.data.s_id,
							method : 'delete'
						}, function(data) {
							if (data.count > 0) {
								console.log('删除成功');
								window.location.reload();
							}
						}, "json");
					});
				} else if (obj.event === 'editstudents') {
					console.log(obj.data);
					layer.open({ //打开一个页面
						type : 2, //在当前的页面之上，弹框形式，展示出添加用户的界面
						area : [ '600px', '500px' ], //页面的宽高
						content : 'students_edit.html', //页面所在的位置
						title : '编辑学生基本信息',
						fix:false,
						maxmin:true,
						success : function(layero, index) {
							console.log(obj.data);
							var body = layer.getChildFrame('body', index);
							body.contents().find("#s_id").val(obj.data.s_id);
							body.contents().find("#s_name").val(obj.data.s_name);
							body.contents().find("#s_card").val(obj.data.s_card);
							body.contents().find("#s_gender").val(obj.data.s_gender);
							body.contents().find("#s_age").val(obj.data.s_age);
							body.contents().find("#s_phone").val(obj.data.s_phone);
							body.contents().find("#s_email").val(obj.data.s_email);
							body.contents().find("#s_card_password").val(obj.data.s_card_password);
							body.contents().find("#s_status").val(obj.data.s_status);
							body.contents().find("#ext1").val(obj.data.ext1);
							body.contents().find("#ext2").val(obj.data.ext2);
						},
						end : function() {
							window.location.reload();
						}
					});
				}
			});
			table.on('toolbar(test)', function(obj) {
				switch (obj.event) {
				case 'addstudents':
					layer.open({
						type : 2,
						area : [ '600px', '500px' ], //页面的宽高
						content : 'students_add.html',
						title : '添加学生基本信息',
						fix:false,
						maxmin:true,
						end : function() {
							window.location.reload();
						}
					});
					break;
				}
				;
			});
		});
		layui.use('laydate', function() {
			var laydate = layui.laydate;
			//同时绑定多个时间选择器
			laydate.render({
				elem : '#begintime',
				type : 'datetime'
			});
			laydate.render({
				elem : '#endtime',
				type : 'datetime'
			});
		});
	</script>
</body>
</html>